<template>
  <div class='container'>
    <!-- 预览对话框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
      <el-row>
        <el-col :span="6">【题型】：{{questionTypeRester(detailQuestions)}}</el-col>
        <el-col :span="6">【编号】：{{detailQuestions.number}}</el-col>
        <el-col :span="6">【难度】：{{difficultyRester(detailQuestions)}}</el-col>
        <el-col :span="6">【标签】：{{detailQuestions.tags}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】：{{detailQuestions.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{detailQuestions.directoryName}}</el-col>
        <el-col :span="12">【方向】：{{detailQuestions.direction}}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">【题干】：</el-col>
      </el-row>
      <el-row>
        <el-col :span="24" v-html="detailQuestions.question"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">选项：（以下选中的选项为正确答案）</el-col>
      </el-row>
      <el-row v-for="item in detailQuestions.options" :key="item.id">
        <el-col :span="24">
          <el-radio :label="item.id">{{item.code}}&nbsp;&nbsp;{{item.title}}</el-radio>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">【参考答案】：
          <el-button :src="detailQuestions.videoURL" autoplay="autoplay" muted="muted" loop="loop" type="danger" @click="videoBtn">视频答案预览</el-button>
          <br><br>
          <video controls="controls" width="300" v-if="video">
            <source src="move.ogg" type="video/ogg">
            <source src="move.mp4" type="video/mp4">
            您的浏览器暂不支持播放视频
          </video>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">【答案解析】：<i v-html="detailQuestions.answer"></i></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">【题目备注】：{{detailQuestions.remarks}}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'QuestionsPreview',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    handleClose: {
      type: Function,
      required: true
    },
    detailQuestions: {
      type: Object,
      required: true
    },
    videoBtn: {
      type: Function,
      required: true
    },
    video: {
      type: Boolean,
      required: true
    },
    questionTypeRester: {
      type: Function,
      required: true
    },
    difficultyRester: {
      type: Function,
      required: true
    }

  }
}
</script>

<style scoped lang='less'></style>
